<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Home - BioCode</title>

</head>
<body>
<div id="main">
    <div class="content-container">
     <%--   <table class="table table-bordered table-condensed table-striped table-hover">
            <thead>
            <tr>
                <th width="250px">Name</th>
                <th width="550px">Description</th>
                <th width="150px">Updated At</th>
                <th>Operations</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach items="${tools}" var="item">
                <tr>
                    <td><a href="${host}/admin/tools/${item.id}/show">${item.name}</a></td>
                    <td>${item.desc}</td>
                    <td>${item.updatedAt}</td>
                    <td><a href="${host}/admin/tools/${item.id}/edit">Edit</a></td>
                </tr>
            </c:forEach>

            </tbody>
        </table>--%>


        <table id="table"></table>
    </div>
</div>
<script>
    function queryParams(params) {
        var datas = {};
        datas.limit = params.limit;
        datas.offset = params.offset;
        datas.size = params.pageSize;
        datas.page = params.pageNumber;
        return datas;
    }
    $(document).ready(function(){
        function operateFormatter(value, row, index) {
            return [
                '<input type="submit" value="Curate" class="RoleOfedit btn btn-primary btn-sm"   data-toggle="modal" style="display:inline">',
            ].join('');
        }
        window.operateEvents = {
            'click .RoleOfedit': function (e, value, row, index) {

             window.location.href="${host}/admin/tools/"+row.id+"/edit"



            }
        };

        $('#table').bootstrapTable({
            method: 'POST',
            url: "${host}/admin/tools/listPage",
            dataType: "JSON",
            queryParamsType: 'page,size',
            /*contentType: "text/html; charset=utf-8",*/
            iconSize: "outline",
            export: 'glyphicon-export icon-share',
            showExport : false, //是否显示导出按钮
            exportDataType : "all", //basic'导出当前页, 'all'导出全部, 'selected'导出选中项.
            //crossDomain: true,
            // clickToSelect: true,//点击选中行
            pagination: true,	//在表格底部显示分页工具栏
            pageSize: 10,	//页面大小
            pageNumber: 1,	//页数
            pageList: [10, 15, 20, 50],
            striped: true,	 //使表格带有条纹
            sidePagination: "server",//表格分页的位置 client||server
            queryParams:  queryParams,
           // queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
            responseHandler : function(res) {
                //在ajax获取到数据，渲染表格之前，修改数据源
                return res;
            },
            silent: true,  //刷新事件必须设置
            contentType: "application/x-www-form-urlencoded",//请求远程数据的内容类型。
            onClickRow: function (row, $element) {
                $('.success').removeClass('success');
                $($element).addClass('success');
            },
            icons: {
                refresh: "glyphicon-repeat",
                toggle: "glyphicon-list-alt",
                columns: "glyphicon-list"
            },
            columns: [ {
                field: 'name',
                title: "Name",
                align: 'center',
                valign: 'middle',
                //  sortable: true // 开启排序功能
            }, {
                field: 'desc',
                title: 'Description',
                align: 'center',
                valign: 'middle',
                //  sortable: true // 开启排序功能
            }, {
                field: 'updatedAt',
                title: 'Updated At',
                align: 'center',
                valign: 'middle',

            }, {
                field: 'operate',
                title: '操作',
                width: '80px',
                align: 'center',
                events: operateEvents,
                formatter: operateFormatter
            }]
        });
    })
</script>
</body>

</html>
